<template>
  <div>
    分类
    <p>store中的count: {{count}}</p>
    <p>store中的计算属性doublecount: {{doublecount}}</p>
    <p>
      <button @click="addcount">同步count+1</button>
      <button @click="jiancount(10)">同步count-10</button>
      <button @click="addcountAsync">异步count+1</button>
      <button @click="jiancountAsync(10)">异步count-10</button>
    </p>

    <!-- 渲染学校列表 -->
    <ul>
      <li v-for="item in schoollist" :key="item.id">{{item.school_name}}</li>
    </ul>
    <ul>
      <li v-for="item in filterschoollist" :key="item.id">{{item.school_name}}</li>
    </ul>
  </div>
</template>

<script>
// 借助辅助函数的方式操作vuex 仓库
// 使用辅助函数将vuex 模块中的数据state 和muations 和actions 映射到当前组件自身的this的实例上
import { mapState, mapActions, mapGetters, mapMutations } from "vuex";
export default {
  data() {
    return {};
  },
  computed: {
    ...mapState(["count"]),
    ...mapGetters(["doublecount"]),
    ...mapState("shop", ["schoollist"]), // 获取子模块shop中schoollist,
    ...mapGetters("shop", ["filterschoollist"])
  },
  methods: {
    ...mapMutations(["addcount", "jiancount"]),
    ...mapActions(["addcountAsync", "jiancountAsync"]),
    ...mapActions("shop", ["initschoollistAsync"])
  },
  mounted() {
    console.log("this-category", this);
    this.initschoollistAsync();
  }
};
</script>
<style scoped>
</style>